<template>
	<div class="article">
		<main class="site-main">
			<article class="hentry">
				<el-container>
					<el-header>
						<h1 class="entry-title">
							{{ articlelist.title }}
						</h1>
						<hr />
						<div class="breadcrumbs">
							<div class="a_time_top">
								发布时间 : {{articlelist.created}}
							</div>
						</div>
					</el-header>
					<el-footer>
						<p class="textp" v-html="articlelist.content"></p>
					</el-footer>
				</el-container>
			</article>
		</main>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				articlelist: {}
			}
		},
		methods: {
			getinitial: function() {
				this.$api.get(
					`/blog/${this.$route.query.id}`
				).then(res => {
					if (!res) {
						return
					}
					if (res.data.code == '1111') {
						this.articlelist = res.data.data
					}
				})
			}
		},
		created() {
			this.getinitial()
		}
	}
</script>

<style lang="less" scoped >
	.article {
		margin: 0 auto;
		padding: 0 10px;
		max-width: 800px;

		.entry-title {
			font-size: 23px;
			font-weight: 600;
			color: #737373;
			margin: .67em 0;

			&:before {
				content: "#";
				margin-right: 6px;
				color: #d82e16;
				font-size: 20px;
				font-weight: 600;
			}
		}

		hr {
			height: 1px;
			border: 0;
			background: #efefef;
			margin: 15px 0;
		}
	}

	.entry-title-description {
		margin-top: 1.2em;
		margin-bottom: .6em;
		line-height: 1.35;
		color: #000;
		font-weight: 100;
		font-size: 30px;
	}

	.breadcrumbs {
		font-size: 14px;
		color: #d2d2d2;
		text-decoration: none;
		margin-bottom: 30px;

		.a_time_top {
			font-size: 13px;
			color: #8b5f65;
		}
	}

	.textp {
		margin-top: 50px;
		line-height: 1.5;
		background: #FFFFFF;
		/deep/h3,h1,h2{
			margin: 50px 0;
		}
	}
	/deep/.ql-syntax{
		color: red;
	}
</style>
